<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Cuber</title>
    <meta charset="GBK"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="css/uniform.css"/>
    <link rel="stylesheet" href="css/select2.css"/>
    <link rel="stylesheet" href="css/maruti-style.css"/>
    <link rel="stylesheet" href="css/maruti-media.css" class="skin-color"/>

    <link href="./echarts/asset/css/font-awesome.min.css" rel="stylesheet">

    <script src="./echarts/asset/js/esl/esl.js"></script>

    <script type="text/javascript" src="./ichart/ichart.1.2.min.js"></script>
</head>
<body>

<!--Header-part-->
<div id="header">
    <h1><a href="dashboard.html">Maruti Admin</a></h1>
</div>
<!--close-Header-part-->

<!--top-Header-messaages-->
<div class="btn-group rightzero"><a class="top_message tip-left" title="Manage Files"><i class="icon-file"></i></a> <a
        class="top_message tip-bottom" title="Manage Users"><i class="icon-user"></i></a> <a
        class="top_message tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span
        class="label label-important">5</span></a> <a class="top_message tip-bottom" title="Manage Orders"><i
        class="icon-shopping-cart"></i></a></div>
<!--close-top-Header-messaages-->

<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
    <ul class="nav">
        <li class=""><a title="" href="#"><i class="icon icon-user"></i> <span class="text">Profile</span></a></li>
        <li class=" dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages"
                                                    class="dropdown-toggle"><i class="icon icon-envelope"></i> <span
                class="text">Messages</span> <span class="label label-important">5</span> <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a class="sAdd" title="" href="#">new message</a></li>
                <li><a class="sInbox" title="" href="#">inbox</a></li>
                <li><a class="sOutbox" title="" href="#">outbox</a></li>
                <li><a class="sTrash" title="" href="#">trash</a></li>
            </ul>
        </li>
        <li class=""><a title="" href="#"><i class="icon icon-cog"></i> <span class="text">Settings</span></a></li>
        <li class=""><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">Logout</span></a>
        </li>
    </ul>
</div>

<!--close-top-Header-menu-->

<div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-th-list"></i> Tables</a>
    <ul>
        <li class="active"><a href="index.html"><i class="icon icon-home"></i> <span>车源数据</span></a></li>
        <li><a href="charts.html"><i class="icon icon-signal"></i> <span>商户数据</span></a></li>
        <li><a href="widgets.html"><i class="icon icon-inbox"></i> <span>网站数据</span></a></li>
        <li><a href="widgets.html"><i class="icon icon-inbox"></i> <span>应用数据</span></a></li>
        <li class="submenu"><a href="#"><i class="icon icon-th-list"></i> <span>系统设置</span> <span
                class="label">3</span></a>
            <ul>
                <li><a href="form-common.html">管理员维护</a></li>
                <li><a href="form-common.html">自定义</a></li>
                <li><a href="form-validation.html">服务监控</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb"><a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a
                href="#" class="current">网站数据</a></div>
        <h1>PC/WAP主页面访问趋势图</h1>
    </div>

    <!-- 上架车源显示开始 -->
    <script type="text/javascript">
        var swidth = screen.availWidth;
        $(function () {
            var index=[],list=[],detail=[],t;
            for(var i=0;i<21;i++){
                t = Math.floor(Math.random()*(30+((i%12)*5)))+10;
                index.push(t);
                t = Math.floor(t*0.5);
                t = t-Math.floor((Math.random()*t)/2);
                list.push(t);
                t = Math.floor(t*0.5);
                t = t-Math.floor((Math.random()*t)/2);
                detail.push(t);
            }

            var data = [
                {
                    name : 'PC首页',
                    value:index,
                    color:'#0d8ecf',
                    line_width:2
                },
                {
                    name : 'PC列表页',
                    value:list,
                    color:'#ef7707',
                    line_width:2
                },
                {
                    name : 'PC最终页',
                    value:detail,
                    color:'#207607',
                    line_width:2
                }
            ];


            var labels = ["2012-12-01", "2012-12-02", "2012-12-03", "2012-12-04", "2012-12-05", "2012-12-06"];

            var line = new iChart.LineBasic2D({
                render: 'canvasDiv',
                data: data,
                align: 'center',
                title: '',
                subtitle: '',
                footnote: '',
                width: swidth - 65,//0.8
                height: 360,//0.4
                sub_option: {
                    smooth: true,//平滑曲线
                    point_size: 10
                },
                tip: {
                    enable: true,
                    shadow: true
                },
                legend: {
                    enable: false
                },
                crosshair: {
                    enable: true,
                    line_color: '#62bce9'
                },
                coordinate: {
                    width: swidth - 150,//0.6
                    valid_width: (swidth - 150) * (5 / 6),//0.5
                    height: 300,//0.26
                    axis: {
                        color: '#9f9f9f',
                        width: [0, 0, 2, 2]
                    },
                    grids: {
                        vertical: {
                            way: 'share_alike',
                            value: 12
                        }
                    },
                    scale: [{
                        position: 'left',
                        start_scale: 0,
                        end_scale: 100,
                        scale_space: 10,
                        scale_size: 2,
                        scale_color: '#9f9f9f'
                    }, {
                        position: 'bottom',
                        labels: labels
                    }]
                }
            });
            //开始画图
            line.draw();
        });

    </script>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="controls " style="padding-bottom:10px;padding-top:10px;">
                        <div class="select2-container" id="s2id_autogen1" >
                            <div class="select2-drop select2-with-searchbox select2-drop-active select2-offscreen"
                                 style="display: block; ">
                                <div class="select2-search" style="margin-top:3px;">
                                    <input type="text" class="select2-input" autocomplete="off" tabindex="0"></div>
                                <ul class="select2-results"></ul>
                            </div>
                        </div>
                        <select style="display: none;width: 156px;padding-bottom: 5px;" >
                            <option>PC端</option>
                            <option>WAP端</option>
                        </select>
                        &nbsp;&nbsp;&nbsp;<a href="more.html" style="line-height: 30px;">查看各主要页面热力图>></a>
                    </div>
                    <div id='canvasDiv'></div>
                </div>
            </div>
        </div>
    </div>


    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-th"></i> </span>
                        <h5>各模块数据统计</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>模块名称</th>
                                <th>昨日数据</th>
                                <th>最近一周数据</th>
                                <th>最近一月数据</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="odd gradeX">
                                <td>首页焦点图</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>首页推荐车源</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>首页用户反馈</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>首页二手车资讯</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>列表页问卷调查</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>详情页估价功能</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>用户投诉</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>用户留言</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>400电话</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">1300</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"><i class="icon-file"></i></span>
                        <h5>用户过滤条件统计</h5>
                    </div>
                    <!-- 引入echarts图表开始 -->
                    <div class="featurette">
                        <div class="echarts-row">
                            <div id="graphic" class="col-md-12" style="border-bottom:1px solid #cdcdcd;">
                                <div id="main" style="height:400px;width: 100%;"></div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                    </div>
                    <!--/.fluid-container-->
                    <!-- Placed at the end of the document so the pages load faster -->
                    <script src="./echarts/asset/js/jquery.min.js"></script>
                    <script src="./echarts/asset/js/bootstrap.min.js"></script>
                    <script type="text/javascript">
                        require.config({
                            packages: [
                                {
                                    name: 'echarts',
                                    location: './echarts',
                                    main: 'echarts'
                                },
                                {
                                    name: 'zrender',
                                    location: 'http://ecomfe.github.io/zrender/src',
                                    //location: '../../../zrender/src',
                                    main: 'zrender'
                                }
                            ]
                        });

                        var idx = 1;
                        option = {
                            title : {
                                text: '',
                                subtext: '',
                                x:'center'
                            },

                            calculable : true,
                            series : [
                                {
                                    name:'使用品牌过滤',
                                    type:'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    data:[
                                        {value:335, name:'使用品牌过滤'},
                                        {value:310, name:'使用车型过滤'},
                                        {value:234, name:'使用价格过滤'},
                                        {value:135, name:'使用颜色过滤'},
                                        {value:248, name:'使用里程过滤'},
                                        {value:448, name:'使用地区过滤'},
                                        {value:148, name:'使用排量过滤'},
                                    ]
                                }
                            ]
                        };
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/pie',
                                    'echarts/chart/bar'
                                ],
                                function (ec) {
                                    var myChart = ec.init(document.getElementById('main'));
                                    myChart.setOption(option);
                                }
                        )
                    </script>
                    <!--- 引入echarts图表结束 -->

                </div>
            </div>
            <div class="span8">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-th"></i> </span>
                        <h5>TOP10车源列表页关键词过滤数据统计 &nbsp;&nbsp;&nbsp;<a href="more.html">More>></a></h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>最热过滤关键词</th>
                                <th>昨日查询次数</th>
                                <th>最近一周查询次数</th>
                                <th>最近一月查询次数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="odd gradeX">
                                <td>奥迪A4L</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>10-15万</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>1年以下</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>黑色</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>1-1.5L</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>奔驰</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>15-20万</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>认证车源</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>三厢车</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="row-fluid">
    <div id="footer" class="span12"> 2015 &copy; Marutii Admin. More Templates <a href="http://www.seamtop.com/"
                                                                                  target="_blank"
                                                                                  title="徙木科技">徙木科技</a> - Collect from
        <a href="#" title="" target="_blank">企业数据化运营服务提供商</a></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.uniform.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/maruti.js"></script>
<script src="js/maruti.tables.js"></script>
</body>
</html>
